import React from 'react';
import { Link } from 'dva/router';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import styles from './Table.less';
import WrappedAdvancedSearch from './AdvancedSearchForm.js';
import { Table, Button, Pagination, Input, Select,Form, Row, Col, Icon} from 'antd';

/**
 * SmartTable:参数说明
 * advanceSelect:用处:高级搜索参数 类型:数组Array, 说明:左侧显示搜索名称 *
 * 例: const advanceSelect = [{name:"创建时间",inputName:"creatTime"},{name:"结束时间",inputName:"endTime"}];
 * select: 用处:高级搜索 类型:对象, fistValue, secondValue *
 * 例: let select = {fistValue: "姓名",secondValue : "性别"};
 * columns: 用处:Table, 参数: key,title,dataIndex,render, 具体用法参考:ant.design的table组件
 * data: 数组, table的数据源dataSource,
 * loading: 加载
 * current: page的当前页
 * total: page数据总数量
 * parentType: model的namespace,table父组件Model的namespace
 * table:
 * addpathname: 添加按钮跳转路径
 * dispatch: action的dispatch
 * type: namepsace
 * upDateAction: 分页走网方法
 * */
const SmartTable = ({columns,data,loading,page,total,type, upDateAction,addPathName,dispatch,scroll,route,advance, top}) => {

  ///**
  // * type: table的model的namepsace
  // * selectdata: 高级搜索 类型: Array, item: object(key, value)
  // * selectOption: 搜索选择框值
  // * */
  //const {type,selectdata,selectOption} = table;
  ///**
  // * 选择操作
  // * @param value
  // * 获取搜索内容
  // */
  //function selectChange(value) {
  //};



  /**
   * 高级搜索需要传递的值
   * advanceSelect: 用处:高级搜索参数 类型:数组Array, 说明:左侧显示搜索名称
   * type: table的model的namepsace
   * parentType: 参考上面
   * selectOption: 参考上面
   * */
  const advanceSelects = {type,route,advance};

  /**
   * onShowSizeChange: 改变分页size
   * current: 改变size后当前页
   * size: 改变后分页size
   * */
  function onShowSizeChange(current, size){

    dispatch({
      type: type + '/changePage',
      page: current,
      pageSize: size
    });

    dispatch({
      type: type + upDateAction,
    });
  }

  /**
   * onChange: 改变page
   * page: 改变后page
   * size: 分页size
   * */
  function onChange(page, pageSize){
    dispatch({
      type: type + '/changePage',
      page: page,
      pageSize: pageSize
    });

    dispatch({
      type: type + upDateAction
    });
  }

  var add = [];
  if (addPathName){
    add.push(
      <Link key="add-btn" to = {addPathName}><Button style={{dispaly: 'none'}} icon="plus" size="default" className={styles.table_add_btn}>添加</Button></Link>
    );
  } else {
    add.push(
      <div key="add-btn" className={styles.table_add_btn}></div>
    )
  }

  return (
    <div>

      {add}

      <div className={styles.search_div}>
        <WrappedAdvancedSearch {...advanceSelects} />
      </div>








      <Table
        className={styles.table_clear}
        style={{top: top}}
        loading={loading}
        dataSource={data} //表格列的配置描述，具体项见下表
        columns={columns} //columns
        rowKey={record => record.id} //表格行 key 的取值，可以是字符串或一个函数
        pagination={false} //pagination，设为 false 时不展示和进行分页
        scroll = {scroll}
        footer={() => (
                      <div className={styles.footer}>
                          <Pagination
                          className={styles.pagination}
                          showSizeChanger={true} //是否可以改变 pageSize
                          showQuickJumper={true} //是否可以快速跳转至某页
                          showSizeChanger={true} //是否可以改变 pageSize
                          defaultCurrent={10} //默认的每页条数
                          pageSizeOptions={['10', '20', '30', '40']} //指定每页可以显示多少条
                          onShowSizeChange={onShowSizeChange} //pageSize 变化的回调
                          onChange={onChange} //页码改变的回调，参数是改变后的页码及每页条数
                          current={page} //当前页数
                          total={total} //数据总数
                          showTotal={(total) => ('共有'+total+'条数据 ')}
                        />
                      </div>
                    )}
      />
    </div>
  );
};

SmartTable.propTypes = {

};

export default connect(({}) => ({}))(SmartTable);

